<template>
	<div class="header" :class="{'fix':setClass}">
		<div id="" class="header-back">
			<span class="iconfont">&#xe6be;</span>
		</div>
		<div id="" class="header-search">
			<span class="iconfont">&#xe666;</span>
			上海海昌海洋公园
		</div>
		<router-link to="/location">
		<div id="" class="header-city">
			{{this.city}}
			<span class="iconfont .icon">&#xe63f;</span>
		</div>
		</router-link>
	</div>
</template>

<script>
	export default{
		name:'homeHeader',
		props:{
			city:""
//,
//				default:function(){
//					return {
//						city:"天津",
//	  					search:"上海海昌海洋公园"
//					}
//				}
//			}
		},
		data(){
			return {
				setClass:false
			}
		},
		methods:{
			scrollChange(){
				let _hei=document.documentElement.scrollTop;
				if(_hei>50){
					this.setClass=true
				}else{
					this.setClass=false
				}
			}
		}
		,
		mounted(){
			window.addEventListener("scroll",this.scrollChange)
		}
		
	}
</script>

<style lang="stylus" scoped="">
	.header
		height:1rem
		line-height:1rem
		text-align:center
		display:flex
		width:100%
		background:white
		z-index:999
		position:fixed
		top:0
		left:0
		.header-back
			float:left
			width:.9rem
			color:#23beae
		.header-search
			flex:1
			height:.64rem
			line-height:.64rem
			margin:.18rem .2rem
			border-radius:.5rem
			background-color:#fff
			color:#93989f
			box-shadow:0 0 .04rem .01rem #ccc
		.header-city
			float:right
			width:1.4rem
			color:#23beae
			font-size:18px
	
		
			
</style>